<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>zcoder2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <%@ include file="/WEB-INF/jsp/common/style_easyui.jsp"%>
    <link rel="stylesheet" href="${ctx}/plugins/easyui/themes/green/index.css" id="theme-index" />
</head>
<body class="easyui-layout">
	<!-- 头部信息 -->
	<div class="banner" data-options="region:'north',border:false" style="overflow: hidden;">
		<div class="logo">
			<img src="${ctx }/static/images/logo.png"/>
			<div class="webname">zcoder2</div>
		</div>
		<div style="padding-left:50px;float: left;">
			<a class="easyui-linkbutton" data-options="iconCls:'fa fa-cubes',plain:true" data-url="coder/templates">代码模板</a>|
			<a class="easyui-linkbutton" data-options="iconCls:'fa fa-database',plain:true" data-url="coder/tables/list">数据连接</a>|
			<a class="easyui-linkbutton" data-options="iconCls:'fa fa-code',plain:true" data-url="tools/code.jsp">代码高亮</a>|
			<a class="easyui-linkbutton" data-options="iconCls:'fa fa-wrench',plain:true" data-url="tools/json.jsp" id="toolBt">菜鸟工具</a>|
			<a class="easyui-linkbutton" data-options="iconCls:'fa fa-bug',plain:true" data-url="restclient" id="toolBt">Postman</a>
		</div>
	</div>
	<!-- 中间内容 -->
	<div data-options="region:'center',border:false">
		<div id="z-tabs" class="easyui-tabs" data-options="border:false,fit:true,tools:[
		{iconCls:'fa fa-refresh',plain:true,
		handler:function(){
			$('#mm-tabupdate').click();
		}}]">
		</div>
		<!-- 导航栏右键菜单 -->
		<div id="mm" class="easyui-menu" style="width: 100px;">
			<div id="mm-tabupdate" data-options="iconCls:'fa fa-refresh'">刷新</div>
			<div class="menu-sep"></div>
			<div id="mm-tabclose" data-options="iconCls:'fa fa-close'">关闭</div>
			<div id="mm-tabcloseall">全部关闭</div>
			<div id="mm-tabcloseother">关闭其他</div>
		</div>
	</div>
	<!-- 底部版权 -->
	<%-- <div data-options="region:'south',border:false" style="height:30px;line-height:30px;text-align: center;">
		Copyright © 2018-2020 ${zparam.WEB_NAME.param_value }
	</div> --%>
</body>
<script type="text/javascript">
// 创建tab
function addTab(params){
	var content = createFrame(params.url);
	// 如果存在则选中
	if($('#z-tabs').tabs('exists',params.title)){
		$('#z-tabs').tabs('select',params.title);
		var extab = $('#z-tabs').tabs('getTab',params.title);
		var url = $(extab.panel('options').content).attr('src');
		if (url != params.url) {
			$('#z-tabs').tabs('update', {
				tab : extab,
				options : {
					content : createFrame(params.url)
				}
			});
		}
		return;
	}
	$('#z-tabs').tabs('add',{
		title: params.title,
		iconCls: params.iconCls,
		content: content,
		closable: true
	});
}
function createFrame(url){
	return '<iframe src="'+ url +'"  scrolling="auto" frameborder="0" style="width:100%;height:100%" ></iframe>';
}

// 页面初始化
$(function(){
	// 主页
	/* $('#z-tabs').tabs('add',{
		title: '菜鸟工具',
		iconCls: 'fa fa-wrench',
		content: createFrame('${ctx }/tools/json.jsp')
	}); */
	// tab右键菜单事件
	$(document).on('contextmenu', '.tabs-inner', function(e) {
		$('#mm').menu('show', {
			left : e.pageX,
			top : e.pageY
		});

		var subtitle = $(this).children(".tabs-title").text();
		// 右键记录当前tab
		$('#mm').data("currtab", subtitle);
		$('#z-tabs').tabs('select', subtitle);
		return false;
	});
	//刷新
	$(document).on('click', '#mm-tabupdate', function() {
		var currTab = $('#z-tabs').tabs('getSelected');
		var url = $(currTab.panel('options').content).attr('src');
		if (url) {
			$('#z-tabs').tabs('update', {
				tab : currTab,
				options : {
					content : createFrame(url)
				}
			});
		}
	});
	//关闭当前
	$(document).on('click', '#mm-tabclose', function() {
		var currtab_title = $('#mm').data("currtab");
		if($('#z-tabs').tabs('getTab', currtab_title).panel('options').closable){
			$('#z-tabs').tabs('close', currtab_title);
		}
	})
	//全部关闭
	$(document).on('click', '#mm-tabcloseall', function() {
		$('.tabs-inner span').each(function(i, n) {
			var t = $(n).text();
			if($(n).hasClass('tabs-closable')){
				$('#z-tabs').tabs('close', t);
			}
		});
	});
	//关闭除当前之外的TAB
	$(document).on('click', '#mm-tabcloseother', function() {
		$('.tabs-selected').siblings().each(function(i,n){
			var t=$('a:eq(0) span',$(n)).text();
			if($('a:eq(0) span',$(n)).hasClass('tabs-closable')){
				$('#z-tabs').tabs('close',t);
			}
		});
	});
	
	$('*[data-url]').click(function(){
		var ops = '{' + $.trim($(this).data('options')) + '}';
		ops = (new Function("return " + ops))();
		addTab({
			title: $(this).text(),
			iconCls: ops.iconCls,
			url: $(this).data('url')
		}); 
	});
	$('#toolBt').click();
});

</script>
<div id="dialog_common"></div>
</html>